<template>
	<view class="page" style="padding-bottom: 150rpx;">
		<topVue title="购物车"></topVue>
		<view class="rightClick flex align-center" @click="isTrash=!isTrash" style="width: 92rpx;">
			<text style="color: #1CC289; font-weight: 600;">{{ isTrash ? "取消" : "删除"}}</text>
		</view>
		
		<view class="itemVue margin20" v-if="!isEmpty">
			<view class="titleVue flex align-center">
				<view class="dot"></view>
				<view class="title">{{ ["订单区", "折扣区", "活动区", "积分区"][categoryId-1] }}</view>
			</view>
			<view class="item flex align-center padding-column20" v-for="(item, index) in list" :key="index">
				<image src="../../static/selected.png" style="width: 46rpx; height: 46rpx;" v-if="item.selected" @click="selectFun(item.id, false)"></image>
				<image src="../../static/select.png" style="width: 46rpx; height: 46rpx;" v-else @click="selectFun(item.id,true)"></image>
				<image :src="item.spu.picUrl" style="width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-left: 12rpx;"></image>
				<view class="right flex-column flex-between">
					<view class="name line-1">{{item.spu.name}}</view>
					<view class="flex">
						<text style="color: #6B7280; line-height: 1; padding-right: 10rpx; font-size: 24rpx;" v-for="(o,i) in item.sku.properties" :key="i">{{o.valueName}}</text>
					</view>
					<view class="flex-between align-center">
						<view class="price">{{item.sku.price/100}}</view>
						<u-number-box v-model="item.count" :min="1" @change="valChange(item)"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		
		<view class="botVue flex-between align-center" v-if="!isEmpty">
			<view class="flex align-center" style="height: 72rpx;" @click="allFun()">
				<image src="../../static/selected.png" style="width: 46rpx; height: 46rpx;" v-if="checked"></image>
				<image src="../../static/select.png" style="width: 46rpx; height: 46rpx;" v-else></image>
				<text style="color: #4B5563;font-weight: 600; padding-left: 15rpx;">全选</text>
			</view>
			<view class="deleteBtn" v-if="isTrash" @click="deleteFun()">删除</view>
			<view class="flex align-center" v-else>
				<view class="cost">合计：{{ totalCost/100 }}</view>
				<view class="btn" @click="toConfirm()">结算</view>
			</view>
		</view>
		
		<empty text="购物车列表为空" v-if="isEmpty"></empty>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
				checked: true,
				value: 1,
				isTrash: false,
				categoryId: null,
				isEmpty: false,
				selectList: [],
				totalCost: 0,
			}
		},
		
		async onLoad(option) {
			this.categoryId = Number(option.value)
			console.log(this.categroyId)
			
		},
		
		async onShow() {
			console.log("kkkkk")
			await this.getList()
		},
		
		methods: {
			toConfirm(){
				let array = []
				this.list.forEach(item=>{
					if(item.selected) array.push(item)
				})
				if(array.length===0) return this.$u.toast("请至少选择一个商品")
				uni.navigateTo({
					url: `./shopcar_confirm_${this.categoryId}?array=` + encodeURIComponent(JSON.stringify(array))
				})
			},
			
			// 购物车列表
			async getList(){
				const result =  await this.$request("/app-api/trade/cart/list", "GET", {
					categoryId: this.categoryId
				})
				if(result.code===0) {
					this.list = result.data.validList
					console.log("购物车列表", this.list)
					this.isEmpty = this.list.length===0
					this.getTotalCost()  //计算总金额
					this.isAll() //判断是否全选状态
				}
			},
			
			getTotalCost(){
				this.totalCost = 0
				for(let i=0; i<this.list.length; i++) {
					if(this.list[i].selected) {
						this.totalCost = this.totalCost + this.list[i].count * this.list[i].sku.price
					}
				}
			},
			
			// 删除购物车
			async deleteFun(){
				let list = []
				this.list.forEach(item=>{
					if(item.selected) {
						list.push(item.id)
					}
				})
				const result =  await this.$request("/app-api/trade/cart/delete", "DELETE", {
					ids: list
				}, "application/x-www-form-urlencoded")
				if(result.code===0) {
					this.$u.toast("删除成功")
					this.isTrash = false
					this.getList()
					this.getTotalCost()
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			isAll(){
				let checked = this.list.some(obj => obj.selected === false);
				this.checked = !checked 
				console.log("是否全选中状态", this.checked)
			},
			
			allFun(){
				if(this.checked) {
					let list = []
					this.list.forEach(item=>{
						list.push(item.id)
					})
					console.log(list)
					this.$request("/app-api/trade/cart/update-selected", "PUT", {
						ids: list,
						selected: false
					}).then(res=>{
						if(res.code===0) {
							this.checked = false
							this.list.forEach(item=>{
								item.selected = false
							})
							this.getTotalCost()
						}
					})
				}else {
					let list = []
					this.list.forEach(item=>{
						if(!item.selected) {
							list.push(item.id)
						}
					})
					this.$request("/app-api/trade/cart/update-selected", "PUT", {
						ids: list,
						selected: true
					}).then(res=>{
						if(res.code===0) {
							this.checked = true
							this.list.forEach(item=>{
								item.selected = true
							})
							this.getTotalCost()
						}
					})
				}
			},
			
			async selectFun(id, check){
				const result = await this.$request("/app-api/trade/cart/update-selected", "PUT", {
					ids: [id],
					selected: check
				})
				if(result.code===0) {
					this.list.forEach(item=>{
						if(item.id===id) item.selected = check
					})
					this.isAll()
					this.getTotalCost()
				}
			},
			
			valChange(e){
				console.log(e)
				this.$request("/app-api/trade/cart/update-count", "PUT", {
					id: e.id,
					count: e.count
				}).then(res=>{
					if(res.code===0) {
						this.getTotalCost()
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.itemVue {
		width: 690rpx;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.titleVue {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f5f5f5;
			margin-bottom: 30rpx;
			.dot {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background: #1CC289;
				margin-left: 30rpx;
			}
			.title {
				padding-left: 20rpx;
				font-weight: 600;
			}
		}
		.item {
			width: 100%;
			padding: 0 30rpx 30rpx 30rpx;
			.right {
				flex: 1;
				height: 140rpx;
				padding-left: 20rpx;
				.name {
					font-weight: 600;
					line-height: 1;
				}
				.price {
					color: #1CC289;
					font-weight: 600;
					line-height: 1;
				}
			}
		}
	}
	
	.botVue {
		width: 100%;
		height: 150rpx;
		background: #fff;
		position: fixed;
		padding: 0 30rpx 0 40rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		.line {
			width: 1rpx;
			height: 72rpx;
			background: rgba(0, 0, 0, .05);
		}
		.cost {
			color: #1CC289;
			font-weight: 600;
					padding-right: 20rpx;
		}
		.btn {
			width: 180rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
			border-radius: 36rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
		}
		.deleteBtn {
			width: 180rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
			border-radius: 36rpx;
			background: #FF3B30;
		}
	}
</style>